<script setup lang="ts">

import {useTokenTweetActivateToken, useTokenTweetGetRemainDays} from "~/utils/tokenUtils";

const activator = defineModel({
  default: false,
})

const {user,tweetToken}=useAuthStore()
const reminddays=ref(0)
onMounted(()=>{
  if (tweetToken){
    reminddays.value=useTokenTweetGetRemainDays(tweetToken)
    console.log('剩余试用时间：',reminddays.value)
  }
})

const key = ref('')

// 处理激活
const handleActive=()=>{
  if(!key.value){
    //获取授权
    const service_url="https://work.weixin.qq.com/kfid/kfc1bf83fcf005d3715"
    window.open(service_url)
  }else{
    if(useTokenTweetActivateToken(user?._id||"",key.value)){
      useSnackbarStore().showSuccessMessage('激活成功')
      activator.value=false
    }else {
      useSnackbarStore().showWarningMessage('激活失败，请联系客服获取激活密钥')
    }
  }
}
/**
 * 继续试用，保存临时token
 */
const handleTrial=()=>{
  activator.value=false
}



</script>

<template>
  <v-dialog
      v-model="activator"
      max-width="500">
    <template v-slot:default="{ isActive }">
      <v-card rounded="lg">
        <v-card-title class="d-flex justify-space-between align-center">
          <div class="text-h6 text-medium-emphasis ps-2 font-weight-bold">
            本信息仅显示一次，请务必仔细阅读！
          </div>

          <v-btn
              icon="mdi-close"
              variant="text"
              @click="isActive.value = false"
          ></v-btn>
        </v-card-title>

        <v-divider class="mb-4"></v-divider>

        <v-card-text>
          <div class="text-medium-emphasis mb-4">
            本模块个人版本提供30天免费试用，建议您添加如下客服联系方式，以便于到期后的激活,您的试用天数剩余
            <span class="text-red-500 font-weight-bold">{{reminddays}}</span>
            天
          </div>

          <div class="mb-2">您的激活id</div>
          <v-text-field disabled :model-value="user?._id" variant="outlined"></v-text-field>
          <div class="mb-2">您的激活密钥</div>
          <v-textarea
              :counter="300"
              class="mb-2"
              rows="2"
              variant="outlined"
              persistent-counter
              label="请输入您的激活密钥"
              v-model="key"
              placeholder="密钥联系客服获取"
          ></v-textarea>
            <div class="text-overline mb-2">💎 个人版权益</div>

          <div class="text-medium-emphasis mb-1">
            <p class="text-caption">定价：创始会员498RMB，普通会员698RMB，无任何二次费用</p>
            <p class="text-caption">终身免费升级，使用教程，社群交流及问题咨询等</p>
            <p class="text-caption">技术服务：协助搭建本地算力服务（个人版使用本地算力，如有疑问请先咨询客服）</p>
            <p class="text-caption">商用版授权请联系客服</p>
          </div>
        </v-card-text>


        <v-divider class="mt-2"></v-divider>

        <v-card-actions class="my-2 d-flex justify-end">
          <v-btn
              class="text-none"
              rounded="xl"
              text="继续试用"
              @click="handleTrial"
          ></v-btn>

          <v-btn
              class="text-none"
              color="primary"
              rounded="xl"
              :text="key?.length>0?'现在激活':'获取授权'"
              variant="flat"
              @click="handleActive"
          ></v-btn>
        </v-card-actions>
      </v-card>
    </template>
  </v-dialog>
</template>

<style scoped lang="scss">

</style>